<template>
	 <view class="login-container">
	<view class="icon-container">
  <image src="/static/favicon.ico" mode="aspectFit" />
    </view>
		<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
			<u-form-item label="用户" prop="userName" borderBottom ref="item1">
				<u--input v-model="userInfo.userName" border="none"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="password" borderBottom ref="item2">
				<u--input type="password" v-model="userInfo.password" border="none"></u--input>
			</u-form-item>
			<u-form-item>
				<u-button type="primary" @click="submit">登录</u-button>
			</u-form-item>
			<u-form-item>
				<u-button type="success">注册</u-button>
			</u-form-item>
		</u--form>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import http from '../../http.js';
	export default {
		data() {
			return {
				showSex: false,
				userInfo: {
					userName: 'student',
					password: '',
					remember: false
				},

				rules: {
					'userName': {
						type: 'string',
						required: true,
						message: '请填写用户',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					console.log(this.userInfo);

					http({
						url: "/api/user/login",
						method: "post",
						data: this.userInfo
					}).then(res => {
						console.log(res);

						if (res.code == 1) {
							// uni.$u.toast('登录成功') 
							this.$refs.uToast.show({
								type: "success",
								message: "登录成功",
								duration: 1000,
								complete() {
									uni.switchTab({
										url: "/pages/index/index"
									})
								},
							});
						} else {
							this.$refs.uToast.show({
								type: "error",
								message: res.message,
								duration: 1000,
							});
						}
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style lang="scss" scoped>
view {
  padding: 20rpx;
}

.u--form {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.u-form-item__body__label__title {
  font-size: 28rpx;
  color: #333;
}

.u--input {
  font-size: 28rpx;
  color: #666;
}

.u-button {
  margin-top: 40rpx;
}
</style>